<template>
	<view class="login" v-if="false">
		<view class="bgimg">
			<view class="login-items bg-white auto borderbox">
				<!-- logo图部分 -->
				<view class="logo dflex alc jcc pt34">
					<view class="logo-one mr10"></view>
					<view class="logo-two"></view>
				</view>
				<!-- 输入框部分 -->
				<view class="input mt60">
					<view>
						<u-field
							v-model.number="mobile"
							label="手机账号"
							placeholder="请输入手机号"
							placeholder-style="color:#BBBBBB;fontSize:32rpx"
						></u-field>
					</view>
					<view class="dflex alc">
						<u-field
							v-model.number="code"
							label="验证码"
							placeholder="请填写验证码"
							placeholder-style="color:#BBBBBB;fontSize:32rpx"
						></u-field>
						<view class="colora fs28" @click="handerCode">{{ tips }}</view>
					</view>
					<view>
						<u-field
							v-model="password"
							label="登录密码"
							type="password"
							placeholder="请输入登录密码"
							placeholder-style="color:#BBBBBB;fontSize:32rpx"
						></u-field>
					</view>
					<view>
						<u-field
							v-model="repassword"
							label="确认密码"
							type="password"
							placeholder="请再次输入密码"
							placeholder-style="color:#BBBBBB;fontSize:32rpx"
						></u-field>
					</view>
				</view>
				<!-- 登录按钮 -->
				<view class="btn white fs38 textc auto" @click="handerReg">注 &nbsp; 册</view>
				<!-- 已有账号 我要登录 -->
				<view class="dflex jcc alc textc mt66">
					<view class="color6 fs28">已有账号，</view>
					<view class="colora fs28" @click="handerLogin">我要登录</view>
				</view>
			</view>
			<view class="dflex jcc mt60 pb80 alc fs24">
				<view class="success bg-color dflex alc jcc borderbox" v-if="success" @click="handerSus">
					<image src="../../static/success.png" mode=""></image>
				</view>
				<view class="unactive borderbox" v-else @click="handerSus"></view>
				<view class="ml16">我已阅读并同意</view>
				<view class="colora" @click="handerSqxy">《社区协议》</view>
			</view>
		</view>
		<!-- 社区协议弹框 -->
		<view>
			<view>
				<u-popup v-model="show" mode="center">
					<view
						v-html="sq"
						style="width: 600rpx;height: 500rpx;padding: 20rpx;overflow: scroll;"
					></view>
				</u-popup>
			</view>
		</view>
	</view>
</template>

<script setup>
import { register, sendcode, getSqxy } from '@/utils/api.js';
import { ref,onMounted } from 'vue';
onMounted(()=>{
	let pageHead = document.getElementsByTagName('uni-page-head');
	pageHead[0].style.display = 'none';
})
let mobile = ref(''); //手机号
let password = ref(''); //密码
let repassword = ref(''); //确认密码
let code = ref(''); //验证码
let tips = ref('获取验证码'); //获取验证码文字
let success = ref(false); //是否同意隐私政策
let miute = ref(60); //倒计时的秒数
let time = ref(0);
let show = ref(false);
let sq = ref('');
// 注册功能
let handerReg = () => {
	let reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/; //声明手机号正则表达式
	//判断
	if (!mobile.value) {
		return uni.showToast({
			title: '手机号不能为空',
			icon: 'none'
		});
	}
	if (!reg.test(mobile.value)) {
		return uni.showToast({
			title: '请输入合法的手机号',
			icon: 'none'
		});
	}
	if (!code.value) {
		return uni.showToast({
			title: '请输入验证码',
			icon: 'none'
		});
	}
	if (!password.value) {
		return uni.showToast({
			title: '请输入密码',
			icon: 'none'
		});
		0;
	}
	if (!repassword.value) {
		return uni.showToast({
			title: '确认密码不能为空',
			icon: 'none'
		});
	}
	if (password.value !== repassword.value) {
		return uni.showToast({
			title: '两次输入的密码不一致',
			icon: 'none'
		});
	}
	if (!success.value) {
		return uni.showToast({
			title: '请您先阅读并同意隐私协议',
			icon: 'none'
		});
	}
	let data = {
		mobile: mobile.value,
		code: code.value,
		password: password.value,
		confirm_password: repassword.value
	};
	register(data).then(res => {
		if (res.code === 1) {
			uni.showToast({
				title: '注册成功',
				icon: 'none',
				success() {
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}, 1500);
				}
			});
		} else {
			return uni.showToast({
				title: res.msg,
				icon: 'none'
			});
		}
	});
};
// 同意隐私政策
let handerSus = () => {
	success.value = !success.value;
};
//验证码倒计时功能
let handerCode = () => {
	let data = {
		mobile: mobile.value,
		event: 'register'
	};
	sendcode(data).then(res => {
		if (res.code == 1) {
			time.value = time.value + 1;
			if ((miute.value === 60 || miute.value === 0) && time.value === 1) {
				let timer = setInterval(() => {
					if (miute.value == 0) {
						tips.value = '再次获取';
						miute.value = 60;
						time.value = 0;
						clearInterval(timer);
						return false;
					}
					if (miute.value > 0) {
						miute.value--;
						tips.value = miute.value + 'S后获取';
						time.value = 0;
					}
				}, 1000);
			} else {
				return uni.showToast({
					title: res.msg,
					icon: 'none'
				});
			}
		}
	});
};
// 跳转到登录页面
let handerLogin = () => {
	uni.navigateTo({
		url: '/pages/login/login'
	});
};
let handerSqxy = () => {
	getSqxy().then(res => {
		sq.value = res.data;
		show.value = true;
		console.log(res.data);
	});
};
</script>

<style scoped lang="scss">
.login {
	.bgimg {
		width: 750rpx;
		height: 636rpx;
		padding: 1rpx;
		background: url('../../static/loginTop .png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		.login-items {
			width: 690rpx;
			height: 1069rpx;
			border-radius: 30rpx;
			margin-top: 249rpx;
			.logo {
				.logo-one {
					width: 142rpx;
					height: 136rpx;
					background: url('../../static/logo.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
				}
				.logo-two {
					width: 280rpx;
					height: 73rpx;
					background: url('../../static/logoRight.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
					margin-top: 20rpx;
				}
			}
			.input {
				padding-left: 70rpx;
				& > view {
					margin-bottom: 50rpx;
				}
				& > view:nth-child(2) {
					:deep(.u-field) {
						padding-right: 0;
					}
					:deep(.uni-input-input) {
						width: 200rpx;
					}
				}
				:deep(.u-label-text) {
					font-size: 26rpx;
					color: #313131;
				}
				:deep(.u-label) {
					margin-right: 18rpx;
				}
			}
			.btn {
				width: 550rpx;
				height: 98rpx;
				line-height: 98rpx;
				background: linear-gradient(137deg, #f65249 0%, #e1251b 100%);
				border-radius: 20rpx;
				margin-top: 68rpx;
			}
			.register {
				padding-left: 106rpx;
				padding-right: 109rpx;
				margin-top: 66rpx;
			}
		}
	}
}
.success {
	width: 33rpx;
	height: 33rpx;
	border-radius: 50%;
	image {
		width: 16rpx;
		height: 16rpx;
	}
}
.unactive {
	width: 33rpx;
	height: 33rpx;
	border-radius: 50%;
	border: 2rpx solid #ccc;
}
</style>
